<template>
	<coreshop-page title="店铺设置" mode="left">
		<view class="form">
			<view class="item">
				<view class="label">店铺名称</view>
				<view class="value">
					<uv-input border="none" v-model="state.storeName" placeholder="请输入店铺名称"></uv-input>
				</view>
			</view>
			<view class="item">
				<view class="label">店铺Logo</view>
				<view>
					<uv-upload :fileList="state.logoFile" name="logo" :maxCount="1" @afterRead="onAfterLogoRead"
						@delete="onDeleteLogo"></uv-upload>
				</view>
			</view>
			<view class="item">
				<view class="label">店铺简介</view>
				<view class="value">
					<uv-textarea v-model="state.storeDesc"
						:countStyle="{'background-color': '#f3f3f3' ,'color':'#292B2E' }" count :maxlength="200"
						border="none" placeholder="请输入店铺简介"></uv-textarea>
				</view>
			</view>
			<view class="item">
				<view class="label">店铺招牌</view>
				<view>
					<uv-upload :fileList="state.bannerFile" name="banner" :maxCount="9" @afterRead="onAfterBannerRead"
						@delete="onDeleteBanner"></uv-upload>
				</view>
			</view>
		</view>
		<coreshop-fixed-bottom-button :radius="100" title="保存" :loading="loading"
			@onClick="hanldeConfirmStoreSet()"></coreshop-fixed-bottom-button>
	</coreshop-page>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryUploadImages, queryAgentInfo, queryAgentSetStore } from '@/core/api';
	import type { Response } from '@/core/models';
	import { handleShowToast } from '@/core/utils';
	import { useLoadingFn } from '@/core/hooks/use-loading';

	const state = reactive<{
		logoFile : Array<{ [key : string] : any }>;
		bannerFile : Array<{ [key : string] : any }>;
		storeName : null | string;
		storeDesc : null | string;
	}>({
		logoFile: [],
		bannerFile: [],
		storeName: null,
		storeDesc: null,
	})

	const loading = ref<boolean>(false);

	const hanldeConfirmStoreSet = useLoadingFn(onConfirmStoreSet, loading);

	onLoad(() => {
		getAgentInfo();
	});

	/** 获取分销商进度状态 */
	const getAgentInfo = async () => {
		const info : Response<any> = await queryAgentInfo({ check_condition: false });
		if (info.status) {
			state.storeName = info.data?.storeName;
			state.storeDesc = info.data?.storeDesc;
			if (info.data?.storeLogo) {
				state.logoFile = [{
					url: info.data?.storeLogo,
				}]
			}
			if (info.data?.storeBanner) {
				state.bannerFile = [];
				info.data?.storeBanner.split(',').forEach((item : string) => {
					state.bannerFile.push({
						url: item
					})
				})
			}
		} else {
			handleShowToast(info.msg)
		}
	}

	/** 店铺logo */
	const onAfterLogoRead = async (e : any) => {
		let src = await getUploadImages(e.file.url);
		state.logoFile = [{
			url: src
		}]
	};
	const onDeleteLogo = () => {
		state.logoFile = [];
	};

	/** 店铺banner */
	const onAfterBannerRead = async (e : any) => {
		let src = await getUploadImages(e.file.url);
		state.bannerFile.push({
			url: src
		})
	};
	const onDeleteBanner = (e : any) => {
		state.bannerFile.splice(e.index, 1);
	};

	/** 保存 */
	async function onConfirmStoreSet() {
		if (!state.storeName) {
			handleShowToast('请输入店铺名称'); return;
		}
		if (state.logoFile.length == 0) {
			handleShowToast('请上传店铺logo'); return;
		}
		if (!state.storeDesc) {
			handleShowToast('请输入店铺简介'); return;
		}
		if (state.bannerFile.length == 0) {
			handleShowToast('请上传店铺招牌'); return;
		}

		let storeLogo = state.logoFile.map((item) => item.url).join(',');
		let storeBanner = state.bannerFile.map((item) => item.url).join(',');

		const store : Response<any> = await queryAgentSetStore({
			storeName: state.storeName,
			storeLogo: storeLogo,
			storeBanner: storeBanner,
			storeDesc: state.storeDesc
		});
		if (store.status) {
			handleShowToast(store.msg, 'success');
		} else {
			handleShowToast(store.msg);
		}
	}

	/** 上传图片 */
	const getUploadImages = (src : string) => {
		return new Promise(async (resolve : any) => {
			const img : Response<any> = await queryUploadImages(src);
			if (img.status) {
				resolve(img?.data?.src);
			} else {
				handleShowToast('上传失败');
			}
		})
	}
</script>

<style scoped lang="scss">
	.form {
		padding-bottom: 170rpx;
		margin: 25rpx;

		.item {
			background-color: #ffffff;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 15rpx;

			.label {
				font-size: 28rpx;
				color: #292B2E;
				margin-bottom: 10rpx;
			}

			.value {
				background-color: #f4f5f7;
				border-radius: 10rpx;
				padding: 10rpx;

				:deep(.uv-textarea) {
					background-color: #f4f5f7;
				}
			}
		}
	}
</style>